import React, { Component } from 'react';
import { TabBar } from "antd-mobile";
import { withRouter } from "react-router-dom";

import SymbolIcon from "../SymbolIcon/index.jsx";

// import { inject, observer } from "mobx-react";
// @inject('store') @observer

@withRouter
class TabbarPage extends Component {
  
  state = {
    showTabbar:['/','/homeView','/CategoryView','/cartView','/discoveryView','/userView'],
    tabbarData:[
      {
        title:'首页',
        url:'/homeView',
        iconName:'icon-home',
        selUrlList:['/','/homeView']
      },
      {
        title:'分类',
        url:'/CategoryView',
        iconName:'icon-iconset0497',
        selUrlList:['/CategoryView']
      },
      {
        title:'发现',
        url:'/cartView',
        iconName:'icon-liebiao',
        selUrlList:['/cartView']
      },
      {
        title:'购物车',
        url:'/discoveryView',
        iconName:'icon-quedingshequ',
        selUrlList:['/discoveryView']
      },
      {
        title:'我的',
        url:'/userView',
        iconName:'icon-geren',
        selUrlList:['/userView']
      },
    ]
  }

  componentDidMount(){
    
  }

  render() {
    let {tabbarData,showTabbar}=this.state;
    let {pathname} =this.props.location;
    return (
      <div style={{position: 'fixed', width: '100%', bottom: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={!showTabbar.includes(pathname)}
        >
          {
            tabbarData.map(item=>{
              return (
                <TabBar.Item
                  title={item.title}
                  key={item.title}
                  icon={
                    <SymbolIcon iconName={item.iconName} />
                  }
                  selectedIcon={
                    <SymbolIcon iconName={item.iconName} style={{color: '#33A3F4'}} />
                  }
                  selected={item.selUrlList.includes(pathname)}
                  onPress={() => {
                    this.props.history.push(item.url);
                    // this.props.history.replace(item.url);  // 不增加跳转记录
                  }}
                  />
              )
            })
          }
        </TabBar>
      </div>

    )
  }
}
export default TabbarPage;